<template>
  <vxe-grid
    ref="xTable"
    border
    resizable
    keep-source
    align="center"
    :height="300"
    :edit-rules="validRules"
    :edit-config="{trigger: 'click', mode: 'row', showStatus: true,autoClear: false}"
    :columns="tableColumn"
    :data="dataSource"
  >
  <!-- :toolbar-config="{slots: { buttons: 'toolbar_buttons'}}" -->
    <!-- <template v-slot:toolbar_buttons>
      <j-select-multi-user style="width:300px;" @select="handleUserChange" />
      <a-dropdown v-if="selectionRows.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
        </a-menu>
        <a-button>批量操作<a-icon type="down" /></a-button>
      </a-dropdown>
    </template> -->
    <template v-slot:action="{ row }">
      <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row)">
        <a>删除</a>
      </a-popconfirm>
    </template>
  </vxe-grid>
</template>
<script >
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
export default {
  name: 'AssessmentUser',
  components: {
    JSelectMultiUser
  },
  props: {
    dataSource: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tableColumn: [
        { type: 'seq', width: 60 },
        { field: 'userTxt', title: '被考核人' },
        { field: 'deptTxt', title: '部门' },
        { title: '操作', slots: { default: 'action' }}
      ],
      selectionRows: [],
      selectedRowKeys: [],
      validRules: {
        username: [
          { required: true, message: '请选择被考核人' },
          { validator: this.usernameValidator }
        ]
      }
    }
  },
  methods: {
    usernameValidator({ cellValue, row, rowIndex }) {
      const { fullData } = this.$refs.xTable.getTableData()
      let flag = false
      fullData.map((item, i) => {
        if (row._XID !== item._XID && row.username === item.username) {
          flag = true
          return false
        }
      })
      if (flag) {
        return new Error('不能重复选择被考核人')
      }
    },
    validate() {
      return this.$refs.xTable.validate(true)
    },
    getTableData() {
      return this.$refs.xTable.getTableData()
    },
    handleAdd(users) {
      this.$refs.xTable.remove()
      users.forEach(item => {
        this.$refs.xTable.insertAt({
          username: item.username,
          deptTxt: item.orgCodeTxt,
          userTxt: item.realname
        }, -1)
      })
    },
    handleDelete(row) {
      this.$refs.xTable.remove(row)
      this.$emit('change', this.$refs.xTable.getTableData())
    },
    batchDel() {
      this.$refs.xTable.removeCheckboxRow()
    }
  }
}
</script>
